<template>
  <div class="app-container" style="width: 95%;max-width: 480px;">
    <el-form ref="form" :model="formData" label-width="200px" label-position="top">
      <el-form-item label="餐桌预定订单提示音设置">
        <div style="display: flex;flex-wrap: wrap;align-items: center;justify-content: center;">
          <audio v-if="formData.diniorder" id="dinVideoPlay" controls height="100" width="100">
            <source :src="domainName + (formData.diniorder)" type="audio/mpeg">
            <source :src="domainName + (formData.diniorder)" type="audio/ogg">
            <embed height="50" width="100" :src="domainName + (formData.diniorder)">
          </audio>
          <el-upload style="margin: 0 20px;"
            :action="domainName+'/admin/upaudio'"
            :multiple="false"
            :show-file-list="false"
            :on-success="handleReplaceAvatarSuccess"
            :beforeUpload="beforeAvatarUpload"
            :on-preview="onPreview"
            name="audio"
            :auto-upload="true"
          >
            <el-button>{{ formData.diniorder ? '重新上传' : '设置' }}</el-button>
          </el-upload>
        </div>
      </el-form-item>
       <el-form-item label="商品订单提示音设置">
        <div style="display: flex;flex-wrap: wrap;align-items: center;justify-content: center;">
          <audio v-if="formData.shoporder" id="shopVideoPlay" controls height="100" width="100">
            <source :src="domainName + (formData.shoporder)" type="audio/mpeg">
            <source :src="domainName + (formData.shoporder)" type="audio/ogg">
            <embed height="50" width="100" :src="domainName + (formData.shoporder)">
          </audio>
          <el-upload style="margin: 0 20px;"
            :action="domainName+'/admin/upaudio'"
            :multiple="false"
            :show-file-list="false"
            :on-success="handleReplaceAvatarSuccess1"
            :beforeUpload="beforeAvatarUpload"
            :on-preview="onPreview"
            name="audio"
            :auto-upload="true"
          >
            <el-button>{{ formData.shoporder ? '重新上传' : '设置' }}</el-button>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="餐桌预定前15分钟推送标题">
        <el-input type="text" v-model="formData.notifytitle"></el-input>
      </el-form-item>
      <el-form-item label="餐桌预定前15分钟推送内容">
        <el-input type="textarea" v-model="formData.notifycontent"></el-input>
      </el-form-item>
      <el-form-item align="center">
        <el-button style="width: 200px;" @click="onSubmit">保存设置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { basets, upaudio, seted } from '@/api/set'
export default {
    data() {
      return {
        formData:{
          shoporder:'',
          diniorder:'',
          notifytitle:'',
          notifycontent:''
        },
        domainName: process.env.VUE_APP_BASE_DOMAIN,
        formDataEd:{
          shoporder:'',
          diniorder:''
        }
      }
    },
    methods: {
      onSubmit() {
        seted(this.formData).then(res=>{
          this.$message({
            message:"保存成功",
            type:'success'
          })
          this.getInfo()
        })
        console.log('submit!');
      },
      getInfo(){
        basets().then(res=>{
          console.log(res.data.rows[0].content)
          this.formData = {
            shoporder: res.data.rows[1].content,
            diniorder: res.data.rows[0].content,
            notifytitle: res.data.rows[2].content,
            notifycontent: res.data.rows[3].content
          }
        })
      },
      /**
        *上传文件限制--只能上传mp3格式的文件
        */
      beforeAvatarUpload(file) {
        // this.formData={
        //   shoporder:'',
        //   diniorder:''
        // }
        var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
        const extension = testmsg === 'mp3'
        if(!extension){
          this.$message({
            message:"上传文件只能是mp3格式！",
            type:'error'
          })
        }
        return extension;
      },
      handleReplaceAvatarSuccess(e){
        // console.log(e)
        this.formData.diniorder = e.data
        // this.formDataEd.diniorder = e.data
        document.getElementById("dinVideoPlay").src = this.domainName+e.data;
      },
      handleReplaceAvatarSuccess1(e){
        // console.log(e)
        document.getElementById("shopVideoPlay").src = this.domainName+e.data;
        this.formData.shoporder = e.data
        // this.formDataEd.shoporder = e.data
      },
      onPreview(e) {
        // console.log(this.replaceList)
        // console.log(e)
        let url = this.domainName + e.response.data
        const audio = new Audio(url);
        audio.play();
      },
      play(data) {
        let url = this.domainName + data
        const audio = new Audio(url);
        audio.play();
      }
    },
    created(){
      this.getInfo()
    }
  }
</script>
